<template>
  <transition name="fade-scale">
    <div
      v-if="visible"
      class="edge-branch-picker"
      :style="{ left: x + 'px', top: y + 'px' }"
    >
      <div class="ebp-list">
        <div
          v-for="(b, idx) in branches"
          :key="idx"
          class="ebp-item"
          @click="select(idx)"
        >
          <span class="dot">•</span>
          <span class="name">{{ b.name }}</span>
        </div>
        <div v-if="!branches || branches.length === 0" class="ebp-empty">无可用分支</div>
      </div>
    </div>
  </transition>
</template>

<script setup lang="ts">
const props = defineProps<{
  visible: boolean
  x: number
  y: number
  branches: { name: string; condition?: string }[]
}>()

const emit = defineEmits<{
  (e: 'close'): void
  (e: 'pick', index: number): void
}>()

function select(i: number) {
  emit('pick', i)
}
</script>

<style scoped>
.edge-branch-picker {
  position: fixed;
  z-index: 4100;
  width: 200px;
  max-height: 260px;
  background: var(--color-bg-2, #fff);
  border: 1px solid var(--color-border-2, #e5e7eb);
  border-radius: 10px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.12);
  padding: 8px;
}
.ebp-title { font-weight: 600; margin-bottom: 6px; }
.ebp-list { max-height: 210px; overflow: auto; }
.ebp-item { display: flex; gap: 8px; align-items: center; padding: 6px 4px; border-radius: 6px; cursor: pointer; }
.ebp-item:hover { background: var(--color-fill-2, #f3f4f6); }
.dot { color: #10b981; }
.name { flex: 1; }
.ebp-empty { color: #94a3b8; text-align: center; padding: 12px 0; }
.fade-scale-enter-active, .fade-scale-leave-active { transition: all .12s ease; }
.fade-scale-enter-from, .fade-scale-leave-to { opacity: 0; transform: scale(0.98); }
</style>
